<template>
	<view class="layer">
		<IndexHead :config="navConfig"/>
		
		<view class="xiangQing">
			<view class="xqOne">
				<text>┃</text><i>发票详情</i>
			</view>
			<view class="xqTwo">
				<p>电子发票与纸质发票具有同等法律效力，可支持报销入账，</p>
				<view class="tuijian">
					<text class="jyuse">建议使用</text>
					<text class="dzfp">电子发票</text>
				</view>
			</view>
		</view>
		
		<!-- 表单 -->
		<view class="biaodan">
			<form action="">
				<label class="label1" for="">发票类型</label>
					<radio-group class="FPleixing" @change="radioChange">
						<label class="radio" v-for="(item, index) in items" :key="item.value">
							<view >
								<radio :value="item.value" :checked="index === current" style="transform:scale(0.6)"/>
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				<!-- <view class="zzfp"><text>纸质发票</text></view> -->
				<label class="label1" for="">发票抬头</label>
				<input class="two" confirmtype="text" placeholder="请输入准确的抬头名称"/><br>
				<hr>
				<label class="label1" for="">税号</label>
				<input class="three" confirmtype="text" placeholder="请输入纳税人的识别号"/><br>
				<hr>
				<label class="label1" for="">更多信息</label>
				<input class="four" confirmtype="text" placeholder="填写备注、地址等（非必填）"/><br>
				<hr>
				<label class="label1" for="">手机号码</label>
				<input class="five" confirmtype="text" placeholder="请输入手机号码"/><br>
				<hr>
				<label for="">发票金额</label><p>488.00元</p>
			</form>
			
		</view>
		
		<view class="jieshou">
			<view class="jsfs">
				<text>┃</text><i>接收方式</i>
			</view>
			<view class="biaodan2">
			<form action="">
				<label for="">电子邮箱</label>
				<input confirmtype="text" placeholder="请输入收件人电子邮箱">
			</form>
			</view>
		</view>
		
		<view class="btn">
			<view class="btn1"><navigator url="">取消申请</navigator></view>
			<view class="btn2"><navigator url="../invoiceSQZ/shenQingZhong">确认提交</navigator></view>
		</view>
		
	</view>
</template>

<script>
	export default{
			data(){
				return{
					navConfig:{
						backgroundColor: 'transparent',
						color: '#fff',
						common:{
							hasSearch:false,
							hasMenu:false,
							hasTitle:true,
							minHead:true,
						},
						left: {
							img:'',
							text:'',
						},
						mid:{
							title:'申请发票',
							hasSearchMid:false
						},
						right:{
							
						}
					},
					items: [{
							// value: 'USA'
							name: '电子发票'
						},
						{
							// value: 'CHN',
							name: '纸质发票',
							// checked: 'true'
						},
					],
					curTabIndex: 0,
					current: 0
				}
			},
			methods: {
				radioChange(evt) {
					for (let i = 0; i < this.items.length; i++) {
						if (this.items[i].value === evt.target.value) {
							this.current = i;
							break;
						}
					}
				}
			}
			
		}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 100%;
		background-color: #fff;
	}
	
	

/* 详情 */
	.xiangQing{
		width: 690upx;
	}
	
	.xqOne{
		width: 690upx;
	}
	
	.xqOne text{
		font-size: 28upx;
		width: 5upx;
		margin-left: 32upx;
		color: #54B0FF;
		float: left;
	}
	
	.xiangQing i{
		font-size: 28upx;
		margin-left: 25upx;
		float: left;
	}
	
	.xqTwo{
		width: 671upx;
		height: 59upx;
		line-height: 30upx;
		margin-top: 20upx;
	}
	
	.xqTwo p{
		width: 671upx;
		height:30upx;
		color: #CFCFCF;
		font-size: 24upx;
		margin-left: 60upx;
		margin-right: 31upx;
		margin-top: 10upx;
		float: left;
		/* padding: 15upx; */
	}
	
	.xqTwo i{
		font-size: 24upx;
		color: #54B0FF;
		margin-left: 1upx;
		float: left;
	}
	.tuijian{
		float: left;
		display: flex;
		flex-direction: row;/*控制方向 --*/
		justify-content:flex-start; /*对齐方式*/
		margin-left: 58upx;
		margin-top: 10upx;
	}
	.jyuse{
		font-size: 24upx;
		color: #CFCFCF;
		margin-left: 1upx;
	}
	.dzfp{
		font-size: 24upx;
		color: #54B0FF;
		margin-left: 1upx;
	}

/* 表单 */
.biaodan{
	width: 690upx;
	height: 610upx;
	box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
	margin-left: 30upx;
	margin-top: 70upx;
}

.biaodan label{
	float: left;
	width: 120upx;
	height: 26upx;
	opacity: 1;
	font-size: 28upx;
	font-family: PingFang SC Regular;
	color: rgba(51,51,51,1);
	margin-left: 42upx;
	margin-top: 33upx;
}
.biaodan>view{
	display: block;
}
.biaodan .FPleixing{
	float: left;
	margin-left: 109upx;
	width: 420upx;
	height: 26upx;
	font-size: 26upx;
	font-family: PingFang SC Regular;
	color: rgba(51,51,51,1);
	margin-top: 37upx;
	margin-left: 105upx;
	margin-bottom: 30upx;
}
.biaodan .radio{
	width: 200upx;
	margin-left: -20upx; 
	margin-top: -5upx;
	display: flex;
	flex-direction: row;/*控制方向 --*/
	justify-content:flex-start; /*对齐方式*/
	align-items: center;/*行高*/
}


.table1 .label1{
		width: 120upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 52upx;
		margin-top: 34upx;
		float: left;
	}
	.biaodan .one{  
		margin-left: 90upx;
		margin-top: 24upx;
		width: 266upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.biaodan hr{
		border: none;
		margin-left: 42upx;
		width: 644upx;
		height: 0.1upx;
		color: #F6F6F6;
		margin-top: 30upx;
		float: left;
	}
	.biaodan .two{
		margin-left: 90upx;
		margin-top: 28upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.biaodan .three{
		margin-left: 90upx;
		margin-top: 28upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.biaodan .four{
		margin-left: 90upx;
		margin-top: 28upx;
		width: 350upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.biaodan .five{
		margin-left: 90upx;
		margin-top: 28upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}

.biaodan p{
	font-size: 28upx;
	width: 118upx;
	height: 25upx;
	opacity: 1;
	font-size: 28upx;
	font-family: PingFang SC Regular;
	color: rgba(255,197,140,1);
	float: left;
	margin-top: 33upx;
	margin-left: 99upx;
}

/* 表单2 */

.jsfs{
	width: 750upx;
	height: 61upx;
	float: none;
	margin-top: 50upx;
}

.jsfs text{
	font-size: 28upx;
	width: 5upx;
	margin-left: 32upx;
	color: #54B0FF;
	float: left;
}

.jsfs i{
		font-size: 28upx;
		margin-left: 25upx;
		float: left;
	}
.biaodan2{
	width: 690upx;
	height: 100upx;
	box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
	margin-left: 30upx;
	margin-top: 20upx;
}

.biaodan2 label{
	width: 120upx;
	height: 26upx;
	font-size: 28upx;
	font-family: PingFang SC Regular;
	color: #333333;
	margin-left: 52upx;
	margin-top: 34upx;
	float: left;
}

.biaodan2 input{
	margin-left: 90upx;
	margin-top: 28upx;
	width: 280upx;
	height: 26upx;
	font-size: 28upx;
	font-family: PingFang SC Regular;
	color: #BBBBBB;
	float: left;
}

/* 按钮 */
.btn>view{display: inline-block;}
.btn1{
	width:240upx;
	height: 72upx;
	background: #E6E6E6;
	font-size: 20upx;
	line-height: 72upx;
	border-radius: 35upx;
	/* margin-left: 3.64rem;
	margin-top: 0.26rem; */
	border:1px solid #FFFFFF;
	text-align: center;
	margin-top: 26upx;
	margin-left: 90upx;
}

.btn1 navigator{
	margin: auto;
	width: 70%;
	height: 0.25rem;
	font-size: 26upx;
	font-family: PingFang SC Regular;
	color: #FFFFFF;
}

.btn2{
	width:240upx;
	height: 72upx;
	font-size: 20upx;
	line-height: 72upx;
	border-radius: 35upx;
	/* margin-left: 3.64rem;
	margin-top: 0.26rem; */
	border:1px solid #FFFFFF;
	text-align: center;
	margin-left: 90upx;
	background-image: linear-gradient(to right, #54B0FF,#577AFF);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='##577AFF', endColorstr='#54B0FF', GradientType=1); 
}

.btn2 navigator{
	margin: auto;
	width: 70%;
	height: 0.25rem;
	font-size: 26upx;
	font-family: PingFang SC Regular;
	color:#FFFFFF;
}
</style>
